<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pou="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Graficas</title>        
    </h:head>
    <body>
        <h:outputStylesheet library="js" name="jquery.jqplot.css"></h:outputStylesheet>
        <h:outputScript target="head" library="js" name="jquery.js"></h:outputScript>
        <h:outputScript target="head" library="js" name="jquery.jqplot.js"></h:outputScript>
        <h:outputScript target="head" library="js" name="jqplot.barRenderer.js"></h:outputScript>
        <h:outputScript target="head" library="js" name="jqplot.categoryAxisRenderer.js"></h:outputScript>
        <h:outputScript target="head" library="js" name="jqplot.pointLabels.js"></h:outputScript>

        <script type="text/javascript">
            $(document).ready(function(){
                var s1 = [22458, 24799, 25755, 29085, 27428, 26998, 22060, 29052];
                var s2 = [16717, 19464, 19090, 19405, 19844, 18778, 17513, 20778];
                var s3 = [1555, 1894, 1882, 2257, 3051, 2647, 3737, 3767];
                // Can specify a custom tick Array.
                // Ticks should match up one for each y value (category) in the series.
                var ticks = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto'];

                var plot1 = $.jqplot('chart1', [s1, s2, s3], {
                    title:'VENTAS-EXPOSICION-OVERDUE', 
                    // The "seriesDefaults" option is an options object that will
                    // be applied to all series in the chart.
                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: {fillToZero: true}
                    },
                    // Custom labels for the series are specified with the "label"
                    // option on the series option.  Here a series option object
                    // is specified for each series.
                    series:[
                        {label:'Ventas'},
                        {label:'Exposicion Mensual'},
                        {label:'Overdue Mensual'}
                    ],
                    // Show the legend and put it outside the grid, but inside the
                    // plot container, shrinking the grid to accomodate the legend.
                    // A value of "outside" would not shrink the grid and allow
                    // the legend to overflow the container.
                    legend: {
                        show: true,
                        placement: 'outsideGrid'
                    },
                    axes: {
                        // Use a category axis on the x axis and use our custom ticks.
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks
                        },
                        // Pad the y axis just a little so bars can get close to, but
                        // not touch, the grid boundaries.  1.2 is the default padding.
                        yaxis: {
                            pad: 1.05,
                            tickOptions: {formatString: '$%d'}
                        }
                    }
                });
                
                s1 = [23, 22, 23, 20, 22, 22, 26, 24];
                s2 = [23, 23, 23, 22, 22, 22, 23, 23];
                s3 = [25, 25, 25, 25, 25, 25, 25, 25];
                
                

                var plot3 = $.jqplot('chart3', [s1, s2, s3, ], 
                { 
                    title:'DSO-YTD-TARGET', 
                    // Series options are specified as an array of objects, one object
                    // for each series.
                    series:[ 
                        {
                            // Change our line width and use a diamond shaped marker.
                            label:'DSO',
                            lineWidth:2, 
                            markerOptions: { style:'dimaond' }
                        }, 
                        {
                            // Don't show a line, just show markers.
                            // Make the markers 7 pixels with an 'x' style 
                            label:'YTD-DSO',
                            markerOptions: { style:"x" }
                        },
                        { 
                            // Use (open) circlular markers.
                            label:'TARGET',
                            markerOptions: { style:"circle" }
                        }
                    ],
                    legend: {
                        show: true,
                        placement: 'outsideGrid'
                    },
                    axes: {
                        // Use a category axis on the x axis and use our custom ticks.
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks
                        },
                        // Pad the y axis just a little so bars can get close to, but
                        // not touch, the grid boundaries.  1.2 is the default padding.
                        yaxis: {
                            pad: 1.05,
                            tickOptions: {formatString: '%d'}
                        }
                    }                        
                }
            );
            });                
        </script> 
        <div style="width: 100%">
            <div style="width: 45%">
                <div id="chart1" style="width: 600px; height: 250px; position: relative; " class="jqplot-target"></div>
            </div>
            <div style="width: 45%;"> 
                <div id="chart3" style="width: 600px; height: 250px; position: relative; " class="jqplot-target"></div>
            </div>
        </div>
    </body>
</html>
